<template>
  <t-modal
    title="编辑视口"
    width="900px"
    :visible="visible"
    @ok="okModal()"
    @cancel="closeModal()"
    wrapClassName="update-roam--viewport-container"
    v-bind="footer"
    forceRender
  >
    <div class="curve-modal-body">
      <a-form-model ref="ruleForm" :model="form">
        <a-form-model-item label="视口名称">
          <a-input
            v-model="form.viewportName"
            placeholder="请输入视口名称"
            :maxLength="30"
          ></a-input>
        </a-form-model-item>
      </a-form-model>
    </div>
  </t-modal>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    parameter: {
      type: Object,
      default() {
        return {};
      },
    },
    footer: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          let { viewportName, index } = this.parameter;
          this.form.viewportName = viewportName;
          this.form.index = index;
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {
        viewportName: "",
        index: "",
      },
    };
  },
  methods: {
    //关闭弹窗
    closeModal() {
      this.$emit("update:visible", false);
    },
    okModal() {
      this.$emit("ok", this.form);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.update-roam--viewport-container {
  .curve-modal-body {
    max-height: 700px;
    overflow: auto;
  }
  .ant-form-item {
    display: flex;
    .ant-form-item-label {
      flex-shrink: 0;
      width: 100px;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
}
</style>
